<template>
  <div class="main-container">
    <!-- 底部背景 -->
    <!-- 人物信息部分 -->
    <!-- tab部分 -->
    <div class="tab-info">
      <navigation-bar :Lang="checkedLang" :isDisabled="state.isDisabled" @handChange="haanChange"></navigation-bar>
      <assistant v-if="!isSquare" @checkedLang="updatecheckedLang" @checkedDisabled="updateDisabled"></assistant>
    <square v-else></square>
    </div>
    <!-- 个人信息 - popup-->
  </div>
</template>

<script setup lang="ts">
// 获取当前主题
import { ComponentInternalInstance, getCurrentInstance, onMounted, reactive, ref, shallowRef, watch } from "vue";
import { themeStore, ITheme } from "../../store/modules/theme";
const themeColors: ITheme = themeStore().theme;
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// 获取动态组件
import NavigationBar from "./components/NavigationBar.vue";
import assistant from "./components/assistant.vue";
import square from './components/square'
interface IState {
  active: string | number;
  tabList?: Array<any>;
  userInfo: any;
  isDisabled: boolean;
}
// 定义tref
const state: IState = reactive({
  active: 0, 
  userInfo: null,
  isDisabled: false,
});

const checkedLang = ref(false);
const updatecheckedLang = (newValue:boolean) => {
  checkedLang.value = newValue;
};

// 修改布尔值的函数
const updateDisabled = (newValue:boolean) => {
  state.isDisabled = newValue;
};


// 监听底部区域显示
watch(
  () => proxy?.$route.fullPath,
  () => {
    proxy?.$nextTick(() => {
      // 获取底部高度 并且设置内容区域距离底部的内边距
      state.active = Number(proxy?.$route.query.tab);
    });
  },
  {
    immediate: true,
    deep: true,
  }
);
const isSquare = ref(false)
const haanChange=(e)=>{
console.log(e)
if(e==0){
  isSquare.value = false
}else{
  isSquare.value = true
}
}
onMounted(() => {
  state.userInfo = JSON.parse(localStorage.getItem('userInfo'));
});
</script>

<style lang="scss" scoped>
.main-container {
  position: relative;
  min-height: 100vh;
}
</style>
<style lang="scss">
.tab-info {
  overflow: hidden;
}
</style>
